<template>
    <view class="shopcard" @tap="toShopIndex">
            <image :src="d.salonPicture" v-if="d.salonPicture" />
              <image src="/static/images/shopDefault.png" v-else/>
            <view class="content">
                    <view class="ul">
                            <view class="n">{{d.salonName}}</view>
                            <view>
                                 <view class="t">{{d.salonType}}</view> 
                            </view>    
                            <view class="a">{{d.salonAddress}}</view>
                    </view>
            </view>
            <view class="distance" v-if="d.distance">{{d.distance}}</view>
    </view>    
</template>
<script>


export default {
    props:{
        d:{
            type:Object,
            default:{}
        }
    },
    methods:{
        toShopIndex(){
            let {salonId} = this.d;

            uni.navigateTo({
                url:`/pages/shopIndex/index?salonId=${salonId}`
            })

        }
    }
}
</script>

<style lang="scss">

%ShopCardStyle{
            padding: 20rpx 0;  
            display: flex;
            align-items: top;
            position: relative;
     
              .distance{
                        color:#666;
                        font-size:24rpx;
                        position: absolute;
                        right:20rpx;
                        bottom:24rpx;
                    }
           
            image{
                width: 90rpx;
                height: 90rpx;
                display: block;
                margin-left: 20rpx;
                border-radius: 15rpx;
            }

             .content{
                    width: 450rpx;
                    text-align: justify;
                    .ul{
                      
                        margin-left: 20rpx;
                        text-align: left;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        &>view{
                            margin-bottom:10rpx;
                        }
                       
                    }
                    .n{
                        color:#000;
                        font-size: 32rpx;
                    }
                    .t{
                        background: $my-main-color;
                        color:#fff;
                        font-size: 24rpx;
                        padding: 0 15rpx;
                        border-radius: 6rpx;
                        display: inline-block;
                        vertical-align: top;

                    }
                    .a{
                        color:#666;
                        font-size:24rpx;
                        line-height: 26rpx;
                        white-space:nowrap;
                        text-overflow:ellipsis;
                        overflow: hidden;
                        height: 26rpx;
                        width: 400rpx;
                    }
                   
                } 
}

 .shopcard{
            margin-right: 20rpx;
            @extend %ShopCardStyle;
 }


 /deep/ .shopcard{
          @extend %ShopCardStyle; 
          margin: 0;
        }   




       
</style>
